<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="我的关注" :isAppBtn="false" :isHome="false"></HeadCustom>
		<view class="tabs-nav fboxRow Ycenter">
			<view class="tabs-item flex1 fboxRow Ycenter Xcenter font32" 
			v-for="(item, index) in navList" :class="{active: navIndex == index}" :key="index"
			@tap="navTap(item, index)">{{item.title}}</view>
		</view>
		<SearchInput :isBtn="false" placeholder="搜索" :keywords.sync="keywords" @del="getInit()" @input="getInit()" />
		<view class="count">共关注 <text class="mark">{{dataPage.total}}</text> 个</view>
		<view class="list-box">
			<template v-if="navIndex == 0">
				<view class="user-item fboxRow Ycenter" v-for="(item, index) in dataList" :key="index">
					<image class="avatar" :src="item.avatar" mode="aspectFill" @tap="goPage(item)"></image>
					<view class="fboxCol flex1" @tap="goPage(item)">
						<view class="fboxRow Ycenter flex1">
							<text class="font32 name lh44 font-ell1">{{item.realName}}</text>
							<text v-if="item.isAuth" class="bwfont "></text>
						</view>
						<view class="info lh40 mt10">
							<text style="margin-right: 24rpx;">{{item.positionName}}</text> {{item.companyName}}
						</view>
					</view>
					<view v-if="item.isAttention" class="btn font28 bg-gray fboxRow Ycenter Xcenter" @tap="attention(item, index)">已关注</view>
					<view v-else class="btn font28 bg-linear fboxRow Ycenter Xcenter" @tap="attention(item, index)">关注</view>
				</view>
				<u-loadmore fontSize="24rpx" :status="dataPage.loading" />
			</template>
			<template v-else>
				<view class="company-item fboxRow Ycenter" v-for="(item, index) in dataList" :key="index">
					<image class="avatar" :src="item.companyLogo" mode="aspectFill" @tap="goPage(item)"></image>
					<view class="fboxCol flex1" @tap="goPage(item)">
						<view class="fboxRow Ycenter flex1 font28 name lh44 font-ell1">{{item.companyName}}</view>
						<view class="info lh40">{{item.industryName}}</view>
						<view class="auth mt10" v-if="item.authStatus == 1">
							<view class="authStatus fboxRow Ycenter Xcenter font24">
								<text class="bwfont bw-qiye font28"></text>
								已认证
							</view>
						</view>
					</view>
					<view v-if="item.isAttention" class="btn font28 bg-gray fboxRow Ycenter Xcenter" @tap="companyAttention(item, index)">已关注</view>
					<view v-else class="btn font28 bg-linear fboxRow Ycenter Xcenter" @tap="companyAttention(item, index)">关注</view>
				</view>
				<u-loadmore fontSize="24rpx" :status="dataPage.loading" />
			</template>
		</view>
	</view>
</template>

<script>
import { memberAttention, memberAddAttention, memberCancelAttention, memberFollowCompany, memberAddCompany, memberCancelCompany } from '@/api/mine.js';
import SearchInput from '@/components/search/index.vue'
export default {
	components:{
		SearchInput
	},
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			navIndex: 0,
			navList: [
				{title: '个人', key: ''},
				{title: '企业', key: ''},
			],
			keywords: '',
			dataList: [],
			dataPage:{
				current: 1,
				size: 20,
				total: 0,
				loading: 'loading',
			},
		};
	},
	onLoad(option) {
		this.getInit();
	},
	onReachBottom() {
		if (this.dataPage.size * this.dataPage.current < this.dataPage.total) {
			this.dataPage.loading = 'loading';
			this.dataPage.current ++
			this.getList();
		} else {
			this.dataPage.loading = 'nomore';
		}
	},
	onPullDownRefresh() {
		this.page.size = 20;
		this.getInit();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 导航切换
		navTap(item, index){
			this.navIndex = index
			this.getInit()
		},
		// 跳转到详情
		goPage(item) {
			this.$pageTo('/CardDetail', { id: item.memberId });
		},
		// 操作关注
		attention(item, index){
			if(item.isAttention){
				// 取消关注
				memberCancelAttention({
					memberIdList: [item.memberId]
				}).then(res=>{
					if(res.data){
						this.dataList[index].isAttention = false
						uni.showToast({
							icon: 'none',
							title: '已取消关注'
						})
					}
				})
			}else{
				// 关注
				memberAddAttention({
					othersId: item.memberId
				}).then(res=>{
					if(res.data){
						this.dataList[index].isAttention = true
						uni.showToast({
							icon: 'none',
							title: '关注成功'
						})
					}
				})
			}
		},
		companyAttention(item, index){
			if(item.isAttention){
				// 取消关注
				memberCancelCompany({
					companyId: item.companyId
				}).then(res=>{
					if(res.data){
						this.dataList[index].isAttention = false
						uni.showToast({
							icon: 'none',
							title: '已取消关注'
						})
					}
				})
			}else{
				// 关注
				memberAddCompany({
					companyId: item.companyId
				}).then(res=>{
					if(res.data){
						this.dataList[index].isAttention = true
						uni.showToast({
							icon: 'none',
							title: '关注成功'
						})
					}
				})
			}
		},
		// 初始化
		getInit() {
			this.dataList = []
			this.dataPage = {
				current: 1,
				size: 20,
				total: 0,
				loading: 'loading',
			}
			this.getList();
		},
		// 分页查询列表
		getList() {
			const api = this.navIndex == 0 ? memberAttention : memberFollowCompany
			let reqData = {}
			if(this.navIndex == 0){
				reqData = {realName: this.keywords}
			}else{
				reqData = {companyName: this.keywords}
			}
			api({ current: this.dataPage.current , size: this.dataPage.size, type: 2, ...reqData}).then(res => {
				if (res.data) {
					res.data.list.filter(item=>{
						item.isAttention = true
					})
					this.dataList = this.dataList.concat(res.data.list);
					this.dataPage.total = res.data.total;
					const {total, current, size} = res.data
					if (total < current * size) {
						this.dataPage.loading = 'nomore';
					}
				}
			});
		},
	}
};
</script>

<style scoped lang="scss">
	.page-wrap{min-height: calc(100vh);background-color: var(--viewBgColor);}
	.tabs-nav{padding: 0 20rpx;height: 88rpx;margin: 0 0 24rpx;}
	.tabs-nav .tabs-item{padding: 0 20rpx;height: 88rpx;position: relative;}
	.tabs-nav .tabs-item.active{font-weight: bold;}
	.tabs-nav .tabs-item.active::before{content: '';position: absolute;bottom: 0;left: 50%;margin-left: -20rpx; width: 40rpx;height: 6rpx;border-radius:6rpx;background-color: var(--titleFontColor);overflow: hidden;}

	.count{padding: 20rpx 40rpx 0;line-height: 40rpx;color: var(--contentFontDarkColor);}
	.count .mark{color: var(--contourButtonTextColor);}
	.list-box{padding: 0 40rpx 40rpx;}
	
	.user-item{padding: 38rpx 0;border-bottom: 1rpx solid #F4F5F9;}
	.user-item .avatar{ margin-right: 22rpx; width: 88rpx;height: 88rpx;border-radius: 12rpx}
	.user-item .bwfont{}
	.user-item .info{ height: 40rpx;overflow: hidden; color: var(--contentFontLightColor);}
	
	.company-item{padding: 38rpx 0;border-bottom: 1rpx solid #F4F5F9;}
	.company-item .avatar{ margin-right: 22rpx; width: 136rpx;height: 136rpx;border-radius: 12rpx}
	.company-item .info{ height: 40rpx;overflow: hidden; color: var(--contentFontLightColor);}
	.company-item .bwfont{ margin-right: 6rpx; background: linear-gradient(360deg, #C49875 6%, #EDB384 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
	.company-item .authStatus{width: 120rpx;height: 40rpx;background: #FAEEE4; color: #BF8355; border-radius: 4rpx}
	
	.btn{width: 120rpx;height: 56rpx;border-radius: 8rpx}
	.bg-gray{background: #E8EDF1;color:#686870 ;}
</style>
